<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <#assign base=request.contextPath  />
    <base id="base" href="${base}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, adminUser-scalable=0">
    <link rel="stylesheet" href="${base}/static/win10/component/layui/css/layui.css" media="all">
    <script>
        var base =  "${base}";
    </script>
</head>
<body>
<br>
<form class="layui-form " action="">
          <div class="layui-form-item">
              <label class="layui-form-label">企业名字</label>
              <div class="layui-input-block">
                  <input type="text" id="companyName" name="companyName"   autocomplete="off" placeholder="请输入企业名字"
                         class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">企业资质验证</label>
              <div class="layui-input-block" id="perview" lay-filter="perview">
                  <input type="hidden" id="companyQualification" name="companyQualification" class="layui-input">
                  <button type="button" class="layui-btn" id="test10">
                      <i class="layui-icon">&#xe67c;</i>上传
                  </button>
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">营业执照图片</label>
              <div class="layui-input-block" id="perview1" lay-filter="perview1">
                  <input type="hidden" id="companyLicenseImg" name="companyLicenseImg" class="layui-input">
                  <button type="button" class="layui-btn" id="test11">
                      <i class="layui-icon">&#xe67c;</i>上传
                  </button>
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">关联用户的ID</label>
              <div class="layui-input-block">
                  <select name="userId" id="userId">
                      <option value="">请选择</option>
                      <#list userlist as item>
                          <option value="${item.trId}">${item.trId}</option>
                      </#list>
                  </select>

              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">是否删除 0正常 / 1已删除</label>
              <div class="layui-input-block">
                  <@dict_tag type="yes-no">
                      <select name="companyIsDelete" lay-filter="companyIsDelete" id="companyIsDelete">
                          <option value="">请选择</option>
                          <#if dictList?? && dictList?size gt 0>
                              <#list dictList as dict>
                                  <option value="${dict.dictK}">${dict.dictVal}</option>
                              </#list>
                          </#if>
                      </select>
                  </@dict_tag>
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">企业备注</label>
              <div class="layui-input-block">
                  <input type="text" id="companyRemarks" name="companyRemarks"   autocomplete="off" placeholder="请输入企业备注"
                         class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">企业区域ID </label>
              <div class="layui-input-block">
                          <div class="layui-input-inline">
                              <select name="province" lay-filter="province" id="province">
                                  <option value="">请选择省</option>
                              </select>
                          </div>
                          <div class="layui-input-inline" style="display: none;">
                              <select name="city" lay-filter="city" id="city">
                                  <option value="">请选择市</option>
                              </select>
                          </div>
                          <div class="layui-input-inline" style="display: none;">
                              <select name="area" lay-filter="area" id="area">
                                  <option value="">请选择县/区</option>
                              </select>
                          </div>
                          <div class="layui-input-inline" style="display: none;">
                              <select name="street" lay-filter="street" id="street">
                                  <option value="">请选择街道</option>
                              </select>
                          </div>
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">企业规模</label>
              <div class="layui-input-block">
                  <@dict_tag type="company_scale">
                      <select name="companyScale" lay-filter="companyScale" id="companyScale">
                          <option value="">请选择</option>
                          <#if dictList?? && dictList?size gt 0>
                              <#list dictList as dict>
                                  <option value="${dict.dictK}">${dict.dictVal}</option>
                              </#list>
                          </#if>
                      </select>
                  </@dict_tag>
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">企业Logo</label>
              <div class="layui-input-block" id="perview2" lay-filter="perview2">
                  <input type="hidden" id="companyLogo" name="companyLogo" class="layui-input">
                  <button type="button" class="layui-btn" id="test12">
                      <i class="layui-icon">&#xe67c;</i>上传
                  </button>
              </div>
          </div>

    <div align="center">
        <button type="button" class="layui-btn" id="submit">保存</button>
    </div>
</form>

<script src="${base}/static/win10/component/layui/layui.js?t=1"></script>
<script src="${base}/static/win10/js/jquery-1.8.3.min.js?t=1"></script>
<script>
    var areaids = '';
    layui.use(['element','upload','form', 'layer'], function() {
        var form = layui.form, upload = layui.upload,element = layui.element
                , layer = layui.layer;
        var $form = $('form');

        //拖拽上传 企业资质验证
        upload.render({
            elem: '#test10'
            , accept: 'images' //只允许上传图片
            , exts: 'jpg|png|gif'
            , url:  base+"/WeChatUser/setImg" //改成您自己的上传接口
            , done: function (res) {
                layer.msg(res.message);
                var dataUrl = res.data;
                $("#companyQualification").val(dataUrl);
                var Html="";
                Html += '<button type=\"button\" class=\"layui-btn\" onclick=\"PreviewImg(\''+dataUrl+'\')\">';
                Html += '预览';
                Html += '</button>';
                $('#perview').append(Html);
                form.render();
            },error: function(res){
                layer.msg(res.message);
            }
        });

        //拖拽上传 营业执照图片
        upload.render({
            elem: '#test11'
            , accept: 'images' //只允许上传图片
            , exts: 'jpg|png|gif'
            , url:  base+"/WeChatUser/setImg" //改成您自己的上传接口
            , done: function (res) {
                layer.msg(res.message);
                var dataUrl = res.data;
                $("#companyLicenseImg").val(dataUrl);
                var Html="";
                Html += '<button type=\"button\" class=\"layui-btn\" onclick=\"PreviewImg(\''+dataUrl+'\')\">';
                Html += '预览';
                Html += '</button>';
                $('#perview1').append(Html);
                form.render();
            },error: function(res){
                layer.msg(res.message);
            }
        });

        //拖拽上传 企业logo
        upload.render({
            elem: '#test12'
            , accept: 'images' //只允许上传图片
            , exts: 'jpg|png|gif'
            , url:  base+"/WeChatUser/setImg" //改成您自己的上传接口
            , done: function (res) {
                layer.msg(res.message);
                var dataUrl = res.data;
                $("#companyLogo").val(dataUrl);
                var Html="";
                Html += '<button type=\"button\" class=\"layui-btn\" onclick=\"PreviewImg(\''+dataUrl+'\')\">';
                Html += '预览';
                Html += '</button>';
                $('#perview2').append(Html);
                form.render();
            },error: function(res){
                layer.msg(res.message);
            }
        });

            $("#submit").on("click",function () {
                areaids = $("#province").val()+","+$("#city").val()+","+$("#area").val()+","+$("#street").val() ;
                if(check()===false){
                return;
            }

            var formDate = {
                companyName:$("#companyName").val(),
                companyQualification:$("#companyQualification").val(),
                companyLicenseImg:$("#companyLicenseImg").val(),
                userId:$("#userId").val(),
                companyIsDelete:$("#companyIsDelete").val(),
                companyRemarks:$("#companyRemarks").val(),
                areaId:/*$("#areaId").val()*/areaids,
                companyScale:$("#companyScale").val(),
                companyLogo:$("#companyLogo").val()
            }
            $.ajax({
                type: "POST",
                url: base+"/WeChatUser/wechatCompany/admin/addWechatCompany",
                data: formDate,
                success: function (data) {
                    layer.msg(data.message)
                    if (data.code === 200) {
                        window.location.href=base+"/WeChatUser/wechatCompany/admin/main.html"
                    } else {

                    }
                }
            });
        })


        function check(){
                   if($("#companyName").val().length<1){
                       layer.msg("请输入企业名字");
                       return false;
                   }
                   if($("#companyQualification").val().length<1){
                       layer.msg("请输入企业资质验证");
                       return false;
                   }
                   if($("#companyLicenseImg").val().length<1){
                       layer.msg("请输入营业执照图片");
                       return false;
                   }
                   if($("#userId").val().length<1){
                       layer.msg("请输入关联用户的ID");
                       return false;
                   }
                   if($("#companyIsDelete").val().length<1){
                       layer.msg("请输入是否删除 0正常 / 1已删除");
                       return false;
                   }
                   if($("#companyRemarks").val().length<1){
                       layer.msg("请输入企业备注");
                       return false;
                   }
                   if(areaids.length<1){
                       layer.msg("请选择企业区域");
                       return false;
                   }
                   if($("#companyScale").val().length<1){
                       layer.msg("请输入企业规模");
                       return false;
                   }
                   if($("#companyLogo").val().length<1){
                       layer.msg("请输入企业Logo");
                       return false;
                   }
        }

        loadProvince();

        form.on('select(province)', function(data) {
            var  pid = data.value;
            if (pid.length > 0){
                loadCity(pid);
            }
        })
        form.on('select(city)', function(data) {
            var  pid = data.value;
            if (pid.length > 0){
                loadArea(pid);
            }
        })
        form.on('select(area)', function(data) {
            var  pid = data.value;
            if (pid.length > 0){
                loadStreet(pid);
            }
        })
        form.on('select(street)', function(data) {
            var  pid = data.value;

        })

       // console.log(areaids);

    //加载省数据
    function loadProvince() {
        var formDate = {
            areaPId:1
        }
        $.ajax({
            type: "POST",
            url: base+"/WeChatUser/wechatCompany/admin/getProvince",
            data: formDate,
            success: function (data) {
               //console.log(data)
                var clos = data.data;
                var proHtml='';
                for (const p in clos) {
                    proHtml+= '<option value="'+clos[p].areaId+'">'+clos[p].areaName+'</option>';
                }
                $("#province").append(proHtml);
                form.render();//菜单渲染 把内容加载进去
            }
        });
    }

        //加载市数据
        function loadCity(pid) {
            var formDate = {
                areaPId:pid
            }
            $.ajax({
                type: "POST",
                url: base+"/WeChatUser/wechatCompany/admin/getProvince",
                data: formDate,
                success: function (data) {
                    $form.find('select[name=area]').parent().hide();
                    $form.find('select[name=street]').parent().hide();
                    //console.log(data)
                    var clos = data.data;
                    var cityHtml='<option value="">请选择市</option>';
                    for (const p in clos) {
                        cityHtml+= '<option value="'+clos[p].areaId+'">'+clos[p].areaName+'</option>';
                    }
                    //$("#city").append(cityHtml);
                    $form.find('select[name=city]').html(cityHtml).parent().show();
                    form.render();//菜单渲染 把内容加载进去
                }
            });
        }

        //加载区县数据
        function loadArea(pid) {
            var formDate = {
                areaPId:pid
            }
            $.ajax({
                type: "POST",
                url: base+"/WeChatUser/wechatCompany/admin/getProvince",
                data: formDate,
                success: function (data) {
                    $form.find('select[name=street]').parent().hide();
                    var clos = data.data;
                    var cityHtml='<option value="">请选择县/区</option>';
                    for (const p in clos) {
                        cityHtml+= '<option value="'+clos[p].areaId+'">'+clos[p].areaName+'</option>';
                    }
                    //$("#city").append(cityHtml);
                    $form.find('select[name=area]').html(cityHtml).parent().show();
                    form.render();//菜单渲染 把内容加载进去
                }
            });
        }

        //加载街道数据
        function loadStreet(pid) {
            var formDate = {
                areaPId:pid
            }
            $.ajax({
                type: "POST",
                url: base+"/WeChatUser/wechatCompany/admin/getProvince",
                data: formDate,
                success: function (data) {
                    //console.log(data)
                    var clos = data.data;
                    var cityHtml='<option value="">请选择街道</option>';
                    for (const p in clos) {
                        cityHtml+= '<option value="'+clos[p].areaId+'">'+clos[p].areaName+'</option>';
                    }
                    //$("#city").append(cityHtml);
                    $form.find('select[name=street]').html(cityHtml).parent().show();
                    form.render();//菜单渲染 把内容加载进去
                }
            });
        }
    });


    function PreviewImg(value) {
        layui.use('layer', function () {
            var layer = layui.layer;
            var height = $(document).height()*0.8; //获取图片高度
            var width = $(document).width()*0.9; //获取图片宽度
            var imgHtml = "<img src='" + value + "' />";
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [width + 'px',height+'px'],
                shadeClose:true,//点击外围关闭弹窗
                scrollbar: false,//不现实滚动条
                title: false, //不显示标题
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        });

    }
</script>
</body>
</html>